<template>
  <div class="confirm-order">
    <div class="my-header">
      <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
      <strong>确认订单</strong>
      <i class="myMsg"></i>
    </div>
    <div class="order-container">
      <!--<div class="addressContainer" v-if="defaultAddress" @click="()=>visiblePopup.selectedAdressVisible=true">
        <div class="addressDefault" v-if="defaultAddress">
          <div class="cell">
            <strong>{{defaultAddress.receiver}} {{defaultAddress.phone}}</strong>
            <span class="defaultIcon" v-if="defaultAddress.isDefault===1">默认</span>
          </div>
          <div class="cell">
            <i class="positionIcon"></i>{{defaultAddress.provinceName + defaultAddress.cityName + defaultAddress.areaName}}&nbsp;&nbsp;{{
            defaultAddress.address}}
          </div>
          <i class="arrow-right"></i>
        </div>
        <div class="addressDefault" v-else>
          <div class="cell">
            <i class="positionIcon"></i> 新建地址
          </div>
          <i class="arrow-right"></i>
        </div>
      </div>-->
      <div class="addressContainer" @click="()=>visiblePopup.selectedAdressVisible=true">
        <div class="addressDefault" v-if="defaultAddress">
          <div class="cell">
            <strong>{{defaultAddress.receiver}} {{defaultAddress.phone}}</strong>
            <span class="defaultIcon" v-if="defaultAddress.isDefault===1">默认</span>
          </div>
          <div class="cell">
            <i class="positionIcon"></i>{{defaultAddress.provinceName + defaultAddress.cityName + defaultAddress.areaName}}&nbsp;&nbsp;{{
            defaultAddress.address}}
          </div>
          <i class="arrow-right"></i>
        </div>
        <div class="addressDefault" v-else>
          <div class="cell">
            <i class="positionIcon"></i> 新建地址
          </div>
          <i class="arrow-right"></i>
        </div>
      </div>
      <div class="venderOrderList" v-for="(store,index) in orderData" :key="store.id">
        <div class="store-title">订单{{index+1}}: {{store.supplierWarehouse}}</div>
        <div class="storeItem" v-for="(good,index) in store.goodsList" :key="index">
          <div class="sizeItem" ref='sizeItem' v-for="(size,sizeindex) in good.sizeList" :key="sizeindex">
            <!--<input type="text" ref='cartId'  v-model="size.cartId">-->
            <img :src="good.goodsImg|splitImg" alt="">
            <div class="orderInfo">
              <div class="info">
                <p class="title">{{good.sellingPoints}} </p>
                <p>货号: {{good.goodsCode}}</p>
                <p> 尺码: {{size.sizeName}}</p>
              </div>

            </div>
            <div class="price">
              <p class="fee">&yen;
                <strong>{{size.discountMoney}}</strong>
              </p>
              <p class="original-price">&yen;<i>{{size.goodsMoney}}</i></p>
              <p class="count">x {{size.cartNum}}</p>
            </div>
          </div>
        </div>
        <ul class="sub-amount">
          <li><strong>  商品总价:   </strong><span> &yen; {{store.totalGoodsMoney}}   </span></li>
          <li><strong>  运费(快递):   </strong><span> &yen; {{store.totalFreight}} </span></li>
        </ul>
        <div class="address-from">
          <div class="cell-from-item">
            <span class="title">留言：</span>
            <div class="content">
              <input type="text" v-model="store.orderRemark" placeholder="可以告诉仓库你的特殊需求">
            </div>
          </div>
        </div>
      </div>
      <ul class="total-amount" v-if="orderData">
        <li><strong>  货品总计:  <span> &yen; {{totalFee}}   </span>  </strong><span class="amount">总计：<span>&yen;{{total}}</span>          </span>
        </li>
        <li><strong>  运费总计:  <span> &yen; {{totaFreight}} </span> </strong><span>{{kindsTotal}} 种 {{quantityTotal}} 件含运费</span></li>
      </ul>
    </div>
    <div class="payOnline" v-bind:class="{  'nav-hide': hideClass }">
      <span>合计：&yen;{{total}}</span>
      <div class="payBtn" @click="submitOrder">提交订单</div>
    </div>
    <mt-popup v-model="visiblePopup.selectedAdressVisible" :closeOnClickModal="true" :modal="false" position="right" class="modal-popup">
      <div class="addressList">
        <div class="my-header">
          <i class="back iconfont icon-left" @click="()=>visiblePopup.selectedAdressVisible=false"></i>
          <strong>选择地址</strong>
          <i class="myMsg"></i>
        </div>
        <scroller width="100%" height="100%" style="margin-top:1.2rem;background:#fff;z-index:999">
          <div class="address-container" v-if="addressData">
            <div class="address-item" v-for="(item,index) in addressData" :key="index" @click="selectedAddress(item)">
              <i class="iconfont" :class="[defaultAddress.id===item.id ? 'icon-select' :'icon-select-default']"></i>
              <p class="name">{{item.receiver}} {{item.phone}}</p>
              <p class="address"><span v-if="item.isDefault" class="deflult-select">[默认地址]</span>{{item.provinceName + item.cityName + item.areaName}}&nbsp;;&nbsp;{{item.address}}</p>
              <!--<i class="iconfont icon-select" v-if="defaultAddress.id===item.id"></i>-->
              <i class="iconfont icon-bj" @click="$router.push({name:'address',query:{id:item.id}})"></i>
            </div>
          </div>
        </scroller>
        <div class="addNewAddressbtn" @click="$router.push('/address')">新增收货地址</div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
  import {
    Field,
    Button,
    Toast,
    Popup
  } from 'mint-ui';
  import {
    mapGetters
  } from 'vuex'

  import {
    setSessionStorage,
    getSessionStorage,
    removeSessionStorage,
  } from '@/utils/mixin';
  // import wechat from '@/utils/wechat';

  export default {

    data() {
      return {
        defaultAddress: null,
        totalFee: 0.00,
        totaFreight: 0.00,
        kindsTotal: 0,
        quantityTotal: 0,
        total: 0.00,
        orderData: null,
        addressData: null,
        visiblePopup: {
          selectedAdressVisible: false
        },
        params: {
          payPassageway: 8, //	订单来源( 8：H5页面)
          orderType: 1, // 订单类型(1：采购)
          orderRemark: null,
        },
        hideClass: false,
        // 默认屏幕高度
        docmHeight: document.documentElement.clientHeight,
        showHeight: document.documentElement.clientHeight,
        goodsImg: ''
      };
    },

    watch: {
      showHeight: 'inputType'
    },
    components: {},
    computed: {
      ...mapGetters([
        'userInfo',
        'addressId'
      ]),
      parmasStr() {
        let proCartIds = ''
        let orderRemarks = ''
        let uIds = ''
        this.orderData.forEach(store => {
          const orderRemark = store.orderRemark === '' ? '无' : store.orderRemark
          orderRemarks += orderRemark + '^'
          uIds += store.uId + ','
          store.goodsList.forEach(item => {
            item.sizeList.forEach(product => {
              proCartIds += product.cartId + ','
            })
          })
        })
        const params = {
          proCartIds: proCartIds.substring(0, proCartIds.length - 1),
          orderRemarks: orderRemarks.substring(0, orderRemarks.length - 1),
          uIds: uIds.substring(0, uIds.length - 1)
        }
        return params
      }

    },
    methods: {
      // 检测屏幕高度变化
      inputType() {
        if (!this.timer) {
          this.timer = true
          let that = this
          setTimeout(() => {
            if (that.docmHeight > that.showHeight) {
              this.hideClass = true;
            } else if (that.docmHeight <= that.showHeight) {
              this.hideClass = false;
            }
            that.timer = false;
          }, 20)
        }
      },
      selectedAddress(item) {
        this.visiblePopup.selectedAdressVisible = false;
        //标识所有的地址为9
        this.addressData.map(item => item.Selected = 9);
        //标识选中的地址为1
        item.Selected = 1;
        //重新请求地址
        this.initData(item.id);
      },
      async initData(id) {
        // 判断是否登录
        if (!this.userInfo) return
        const params = {
          userId: this.userInfo.id,
          key: this.$route.query.id,
          addressId: id !== undefined ? id : this.addressId
        }
        if (this.$route.query.addressId) {
          params.addressId = this.$route.query.addressId
        }
        await this.$store.dispatch('GetConfirmProduct', params).then(res => {
          this.orderData = res.data.cartList
          this.defaultAddress = res.data.addressInfo
          this.addressData = res.data.addressList
          // 计算 总运费，总金额
          let TotalFee = 0
          let TotalFreight = 0
          let quantityTotal = 0
          let kindsTotal = 0
          this.orderData.forEach(store => {

            this.$set(store, 'orderRemark', '')
            TotalFee += parseFloat(store.totalGoodsMoney)
            TotalFreight += parseFloat(store.totalFreight)
            store.goodsList.forEach(item => {
              item.sizeList.forEach(product => {
                kindsTotal += 1
                quantityTotal += product.cartNum
              })
            })
          })
          // 总运费，总金额
          this.totalFee = TotalFee.toFixed(2)
          this.totaFreight = TotalFreight.toFixed(2)
          this.quantityTotal = quantityTotal
          this.kindsTotal = kindsTotal
          this.total = (TotalFee + TotalFreight).toFixed(2)
        }).catch(err => {
          Toast(err.info);
        });
      },
      async submitOrder() {
        if (this.defaultAddress == null) {
          Toast('请先添加地址');
          return;
        }
        const formData = {
          cartId: this.parmasStr.proCartIds,
          userId: this.userInfo.id,
          //  userId: 'a2d4c13d40264dbfbb16f14727d06cab',
          addressId: this.defaultAddress.id,
          orderTotalMoney: this.total,
          payPassageway: this.params.payPassageway,
          uId: this.parmasStr.uIds,
          orderRemark: encodeURI(this.parmasStr.orderRemarks),
          orderType: this.params.orderType
        }
        this.$store.dispatch('CreateOrder', formData).then(res => {
          this.$router.push({
            name: 'pay',
            query: {
              orderid: res.data.orderId
            }
          })
        })
      },

    },
    mounted() {
      //刷新当前页面
      this.initData();
      window.onresize = () => {
        return (() => {
          window.screenHeight = document.body.clientHeight;
          this.showHeight = window.screenHeight;
        })()
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .confirm-order {
    height: 100%;
    .order-container {
      padding: 1.25rem 0 2rem 0;
      height: 100%;
      overflow-y: scroll;
      .addressContainer {
        background: #fff;

        margin-bottom: $margin;
        .addressDefault {
          padding: $padding;
          background: url('~assets/common/images/addressbg.png') repeat-x bottom;
          background-size: 64px 5px;
          position: relative;
        }
        .arrow-right {
          display: block;
          position: absolute;
          right: 10px;
          top: 50%;
          margin-top: -.25rem;
          width: .45rem;
          height: .45rem;
          background: url('~assets/common/images/arrow-right.png') no-repeat;
          background-size: auto 100%;
        }
        .cell {
          strong {
            font-size: 16px;
          }
          font-size: 14px;
          padding-bottom:.15rem;
          margin-right:.45rem;
        }
        .defaultIcon {
          color: $red;
          border: 1px solid $red;
          border-radius: 5px;
          padding: 0px 3px;
        }
        .positionIcon {
          display: inline-block;
          background: url('~assets/common/images/product-detail-sprites-mjs.png') no-repeat;
          width: 25px;
          height: 25px;
          background-position: -17px 2px;
          background-size: 150px;
          vertical-align: -8px;
        }
      }
      .venderOrderList {
        margin-bottom: $margin;
        .store-title {
          padding: $padding;
          font-size: 14px;
          background: #ffffff;
        }
        .storeItem {
          .sizeItem {
            padding: $padding;
            border-bottom: 4px solid #fff;
            background: #FCFCFC;
            @include flexbox(space-between,
            center,
            row,
            nowrap);
            img {
              max-width: 1.6rem; // max-height: 1.6rem;
              margin-right: 0.2rem;
              border: 1px solid #eee;
            }
            .orderInfo {
              @include flexbox(space-between,
              center,
              row,
              nowrap);
              font-size: 16px;
              .info {
                flex-grow: 1; //决定如何分配剩余空间
                .title {
                  @include textoverflow(1);
                  margin-bottom: 0.2rem;
                }
                p {
                  color: $gray;
                  margin-bottom: 0.2rem;
                  font-size: 14px;
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
            .price {
              .fee {
                margin-bottom: 0.2rem;
                color: $red;
              }
              .original-price {
                text-decoration: line-through;
              }
              p {
                width: 70px;
                color: $gray;
                margin-bottom: 0.2rem;
                font-size: 14px;
                text-align: right;
                &:last-child {
                  margin-bottom: 0;
                }
              }
            }
            &:last-child {
              border-bottom: 0;
            }
          }
        }
        .sub-amount {
          padding: $padding;
          background: #ffffff;
          border-bottom: 1px solid #eee;
          li {
            @include flexbox(space-between,
            center,
            row,
            nowrap); // width: 4rem;
            line-height: 28px;
            color: $gray;
            strong {
              font-weight: normal;
              color: #333;
              margin-right: 10px;
            }
          }
        }
        .address-from {
          background: #fff;
          .cell-from-item {
            @include flexbox(flex-start,
            center,
            row,
            nowrap);
            padding: $padding;
            border-bottom: 1px solid #eee;
            .title {
              font-size: $subtitle;
              color: #333;
              white-space: nowrap;
            }
            .content {
              width: 100%;
              @include placeholderColor($gray);
              input {
                width: 100%;
                border: none;
                outline: none;
                box-shadow: none;
                text-shadow: none;
                text-align: right;
                font-size: $subtitle;
                color: #333;
                line-height: 24px;
              }
            }
          }
        }
      }
      .total-amount {
        padding: $padding;
        @include flexbox(space-between,
        space-between,
        column,
        nowrap);
        background: #ffffff;
        li {
          @include flexbox(space-between,
          flex-start,
          row,
          nowrap); // width: 4rem;
          line-height: 28px;

          strong {
            font-weight: normal;
            margin-right: 10px;
            span {
              color: $gray;
            }
          }
          .amount {
            font-size: 16px;
            span {
              color: $red;
            }
          }
        }
      }
    }
    .payOnline {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      background: #fff;
      font-size: 17px;
      @include flexbox(space-between,
      center,
      row,
      nowrap);
      span {
        color: $red;
        padding: 0 $padding;
      }
      .payBtn {
        width: 40%;
        height: 100%;
        color: #fff;
        padding: 15px;
        background: $red;
        text-align: center;
      }
    }
    .nav-hide {
      position: static!important;
    }
  }

  .paymentLoading {
    position: fixed;
    @include flexbox(center,
    center,
    row,
    nowrap);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    img {
      background: rgba(0, 0, 0, .6);
      width: 3rem;
    }
  }

  .paymentContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .4);
    @include flexbox(center,
    center,
    row,
    nowrap);
    .content {
      width: 85%;
      background: #fff;
      border-radius: 10px;
      >button {
        width: 60%;
        margin: 20px auto;
        background: $red;
      }
      >a {
        margin: 5px 0;
        padding: 0 15px;
      }
      .title {
        @include flexbox(center,
        center,
        row,
        nowrap);
        position: relative;
        padding: 15px;
        border-bottom: 1px solid #eee;
        strong {
          font-size: 20px;
        }
        .closeIcon {
          display: block;
          background: url('~assets/common/images/product-detail-sprites-mjs.png') no-repeat;
          width: 25px;
          height: 25px;
          background-position: -38px -19px;
          background-size: 150px;
          vertical-align: -8px;
          position: absolute;
          left: 10px;
        }
      }
      .paymentInfo {
        padding: 15px;
        border-bottom: 1px solid #eee;
        @include flexbox(flex-start,
        center,
        column,
        wrap);
        font-size: 20px;
        span {}
        strong {
          font-size: 40px;
          font-weight: 400;
          margin: 10px 0 0;
        }
      }
    }
  }

  .addressList {
    .addNewAddressbtn {
      position: fixed;
      width: 100%;
      text-align: center;
      bottom: 0;
      background: $red;
      font-size: $title;
      color: #fff;
      height: 46px;
      line-height: 46px;
      text-align: center;
      z-index: 2000;
    }
    .address-container {
      box-sizing: content-box;
      padding-bottom: 100px;
      background: #fff;
      .address-item {
        @include flexbox(space-between,
        flex-start,
        column,
        wrap);
        background: #fff;
        padding: 0 40px;
        position: relative;
        border-bottom: 1px solid #eee;
        .icon-select-default,
        .icon-select {
          width: 20px;
          height: 20px;
          position: absolute;
          top: 50%;
          left: 10px;
          margin-top: -12px;
          font-size: 20px;
        }
        >p {
          width: 100%;
        }
        .name {
          font-size: $title;
          color: #333;
          padding: $padding 0;
          @include textoverflow(1);
        }
        .address {
          .deflult-select {
            color: $red;
          }
          font-size: $smsub;
          color: $gray;
          padding: 0 0 15px;
          @include textoverflow(2);
        }
        .icon-bj {
          width: 20px;
          height: 20px;
          position: absolute;
          top: 50%;
          right: 20px;
          margin-top: -13px;
          font-size: 26px;
          color: $gray;
        }
      }
    }
  }
</style>
<style lang="scss">
  .paymentContainer .mint-cell-wrapper {
    background-image: none;
  }
</style>